<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Ayame Send/Recv Sample</title>
        <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
    </head>
    <body>
      <header class="sticky row">
      <h4>Ayame Send/Recv Sample</h4>
      </header>
      <div>
        <p>ルームID
        <input id="roomIdInput" type="text"></input>
        </p>
        <p>クライアントID
        <input id="clientIdInput" disabled type="text" value=""></input>
        </p>
        <p> 映像コーデック
        <select id="video-codec" onChange="onChangeVideoCodec();">
          <option value="none">none</option>
          <option value="H264">H264</option>
          <option value="VP8">VP8</option>
          <option value="VP9">VP9</option>
        </select>
        （Google Chrome、Microsoft Edge でのみで動作します）
        </p>
        <button onclick="startConn();">接続</button>
        <button onclick="disconnect();">切断</button>
      </div>
      <div style="float:left;">
        <video id="local-video" muted autoplay playsinline style="width: 400px; height: 300px; border: 1px solid black;"></video>
      </div>
      <div style="float:left; margin-left: 20px;">
        <video id="remote-video" autoplay playsinline style="width: 400px; height: 300px; border: 1px solid black;"></video>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/@open-ayame/ayame-web-sdk@2020.3.0/dist/ayame.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.7.0/qs.min.js"></script>
      <script src="./main.js"></script>
      <script type="text/javascript">
        const options = Ayame.defaultOptions;
        options.clientId = clientId ? clientId : options.clientId;
        if (signalingKey) {
          options.signalingKey = signalingKey;
        }
        const localVideo = document.querySelector('#local-video');
        const remoteVideo = document.querySelector('#remote-video');
        let conn;
        const disconnect = () => {
          if (conn) {
            conn.disconnect();
          }
        }
        const startConn = async () => {
          options.video.codec = videoCodec;
          conn = Ayame.connection(signalingUrl, roomId, options, true);
          const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true})
          const authnMetadata = {hoge: "fuga"};
          conn.on('open', ({authzMetadata}) => console.log(authzMetadata));
          conn.on('disconnect', (e) => {
            console.log(e);
            localVideo.srcObject = null;
            remoteVideo.srcObject = null;
          });
          conn.on('addstream', async (e) => {
            console.log(e.stream);
            remoteVideo.srcObject = e.stream;
          });
          await conn.connect(mediaStream, { authnMetadata });
          localVideo.srcObject = mediaStream;
        };
        document.querySelector("#roomIdInput").value = roomId;
        document.querySelector("#clientIdInput").value = options.clientId;
      </script>
  </body>
</html>
